<template>
    <view class="container">
        <view class="avatar-box">
            <view class="avatar" :style="`--img: url(${ avatar })`"></view>
            <view class="name">{{ name }}</view>
        </view>
        <view class="btn-box">
            <view class="btn">{{ type == 'like' ? ( static ? '已关注' : '关注' ) : ( static ? '已互粉' : '回粉' ) }}</view>
        </view>
    </view>
</template>

<script setup>
// import { base_url } from '../../api/config';

const props = defineProps({
    avatar: String,
    name: String,
    static: Boolean,
    type: String,
});

</script>

<style scoped lang="less">
.container {
    width: 100%;
    box-sizing: border-box;
    padding: 4vw;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .avatar-box {
        --size: 12vw;
        display: flex;
        align-items: center;
        gap: 2vw;
        flex: 1;

        .avatar {
            width: var(--size);
            height: var(--size);
            border-radius: 50%;
            background-image: var(--img);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .name {
            font-size: 4.5vw;
            font-weight: 900;
        }
    }

    .btn-box {
        width: 20vw;

        .btn {
            width: 100%;
            padding: 1vw 0;
            text-align: center;
            border: 0.1vw solid #000;
            border-radius: 3vw;
        }
    }
}
</style>